<template>
  <div class="container">
    <div class="app-container">
      <div class="left">
        <el-input
          v-model="query.keyword"
          style="margin-bottom:10px"
          type="text"
          prefix-icon="el-icon-search"
          size="small"
          placeholder="输入员工姓名全员搜索"
          @input="handleSearch"
        />
        <!-- 树形组件 -->
        <!--
          default-expand-all	是否默认展开所有节点
          expand-on-click-node 是否在点击节点的时候展开或者收缩节点
         -->
        <el-tree
          ref="treeRef"
          highlight-current
          node-key="id"
          :data="treeData"
          :props="{label:'name'}"
          default-expand-all
          :expand-on-click-node="false"
          @current-change="handleNodeChange"
        />
      </div>
      <div class="right">
        <el-row class="opeate-tools" type="flex" justify="end">
          <el-button size="mini" type="primary" @click="$router.push('/employee/detail')">新增员工</el-button>
          <el-button size="mini" @click="showExcelDialog = true">Excel上传</el-button>
          <el-button size="mini" @click="handleDownload">Excel下载</el-button>
        </el-row>
        <!-- 表格组件 -->
        <el-table :data="empList">
          <el-table-column label="头像" width="80" align="center">
            <template #default="{row}">
              <el-avatar v-if="row.staffPhoto" :src="row.staffPhoto" :size="30" />
              <!-- charAt()用于返回字符串中指定位置的字符 -->
              <span v-else class="username">{{ row.username.charAt(0) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="姓名" prop="username" />
          <el-table-column label="手机号" sortable prop="mobile" />
          <el-table-column label="工号" sortable prop="workNumber" />
          <el-table-column label="聘用形式" width="80">
            <template #default="{row}">
              <span>{{ row.formOfEmployment === 1 ?'正式':'非正式' }}</span>
            </template>
          </el-table-column>
          <el-table-column label="部门" prop="departmentName" />
          <el-table-column label="入职时间" sortable prop="timeOfEntry" />
          <el-table-column label="操作">
            <template #default="{row}">
              <el-button type="text" size="small" @click="$router.push(`/employee/detail/${row.id}`)">查看</el-button>
              <el-button type="text" size="small" @click="handleOpen(row.id)">分配角色</el-button>
              <el-popconfirm
                title="确定删除吗?"
                style="margin-left:10px"
                @onConfirm="handleDel(row.id)"
              >
                <template #reference>
                  <el-button type="text" size="small">删除</el-button>
                </template>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-row type="flex" justify="end" style="margin-top:20px;">
          <el-pagination
            :total="total"
            layout="total,prev,pager,next"
            :current-page="query.page"
            :page-size="query.pagesize"
            @current-change="handleCurrentChange"
          />
        </el-row>
      </div>
    </div>
    <!-- 上传excel组件 -->
    <import-excel
      :visible.sync="showExcelDialog"
      @success="getEmpList"
    />

    <!-- 分配角色 -->
    <el-dialog title="分配角色" :visible.sync="showRoleDialog" @click="roleIds = []">
      <!-- 多选框组 -->
      <el-checkbox-group v-model="roleIds">
        <el-checkbox
          v-for="item in roleList"
          :key="item.id"
          :label="item.id"
        >
          {{ item.name }}
        </el-checkbox>
      </el-checkbox-group>
      <!-- 操作按钮 -->
      <el-row type="flex" justify="center" style="margin-top:30px">
        <el-button type="primary" size="mini" @click="handleAssignRole">确定</el-button>
        <el-button size="mini" @click="showRoleDialog = false">取消</el-button>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import { getEnabledRoleAPI } from '@/api/role'
import { getDeptListAPI } from '@/api/department'
import { list2Tree } from '@/utils'
import {
  getEmpListAPI,
  getEmpBlobListAPI,
  delEmpAPI,
  getEmpDetailAPI,
  assignRoleAPI
} from '@/api/employee'
import fileSaver from 'file-saver'
import ImportExcel from './components/import-excel.vue'
export default {
  name: 'Employee',
  components: {
    ImportExcel
  },
  data() {
    return {
      // 树形数据
      treeData: [],
      // 查询参数
      query: {
        page: 1, // 页码
        pagesize: 10, // 条数
        keyword: '', // 名字关键字
        departmentId: 1 // 部门id
      },
      // 员工列表
      empList: [],
      // 总条数
      total: 0,
      // 控制上传excel弹框显示隐藏
      showExcelDialog: false,
      // 控制分配角色弹框显示隐藏
      showRoleDialog: false,
      // 收集角色id的数组
      roleIds: [],
      // 角色列表
      roleList: []

    }
  },
  created() {
    this.getDeptList()
    this.getEmpList()
    this.getRoleList()
  },
  methods: {
    // 点击确定按钮 分配角色
    async handleAssignRole() {
      // 发请求 修改员工角色
      await assignRoleAPI(this.roleId, this.roleIds)
      // 提示信息
      this.$message.success('修改角色成功')
      // 关闭弹窗
      this.showRoleDialog = false
    },
    // 获取已启用角色列表
    async getRoleList() {
      this.roleList = await getEnabledRoleAPI()
    },
    // 分配角色弹框打开时
    async handleOpen(id) {
      // 记录当前角色的id,给分配角色时,点击确定按钮使用
      this.roleId = id
      // 当打开弹框先把数组置为空,防止闪屏, 或是在关闭弹框时置为空.
      this.roleIds = []
      // 显示弹框
      this.showRoleDialog = true
      // 获取员工详情-回显员工已有的角色
      const detail = await getEmpDetailAPI(id)
      // 给roleIds数组赋值(影响v-model绑定的视图)
      this.roleIds = detail.roleIds
    },
    // 删除员工
    async handleDel(id) {
      // 发送请求 (删除员工)
      await delEmpAPI(id)
      // 提示信息
      this.$message.success('删除成功')
      // 判断页面
      if (this.empList.length === 1 && this.query.page > 1) {
        this.query.page--
      }
      // 重新获取员工列表
      this.getEmpList()
    },
    // Excel下载
    async handleDownload() {
      // 调用接口 -> 拿到后台返回的二进制流数据(文件的内容)
      const blob = await getEmpBlobListAPI()
      // 调用fileSaver模块(先下包) 中的 saveAs(数据,文件名称)函数
      fileSaver.saveAs(blob, '黑马员工列表.xlsx')
    },
    // 输入框搜索
    handleSearch() {
      // 做防抖处理
      // 如果timerId有值,先关闭之前的延时器
      if (this.timerId) clearTimeout(this.timerId)
      // 开启新的延时器 (一般延时300-800之间)
      this.timerId = setTimeout(() => {
        // 重置页码为1
        this.query.page = 1
        // 获取员工列表
        this.getEmpList()
      }, 500)
    },
    // 当节点改变时
    handleNodeChange(node) {
      // node:当前节点(部门)对象
      // 记录当前点击部门的id
      this.query.departmentId = node.id
      // 请求当前点击部门的员工列表
      this.getEmpList()
    },
    // 当页码改变时
    handleCurrentChange(val) {
      // 记录当前页码
      this.query.page = val
      // 通过新赋值的query来获取用户列表
      this.getEmpList()
    },
    // 获取部门列表
    async getDeptList() {
      // 获取部门列表
      const deptList = await getDeptListAPI()
      // 将数组结构转为树形结构
      this.treeData = list2Tree(deptList, 0)
      // Vue中数据变了,DOM的更新是异步的,需要等到树形组件渲染完毕.
      // 方可调动其中的方法,在$nextTick()的回调中确保树形组件渲染完毕.  this.$nextTick()用于在DOM更新后执行回调函数
      // 设置根节点高低
      this.$nextTick(() => {
        this.$refs.treeRef.setCurrentKey(1)
      })
    },
    // 获取员工列表
    async getEmpList() {
      // 发请求 获取员工列表
      const { rows, total } = await getEmpListAPI(this.query)
      // 保存数据
      this.empList = rows
      this.total = total
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  background: #fff;
  display: flex;
  .left {
    width: 280px;
    padding: 20px;
    border-right: 1px solid #eaeef4;
  }
  .right {
    flex: 1;
    padding: 20px;
    .opeate-tools {
      margin:10px ;
    }
    .username {
      height: 30px;
      width: 30px;
      line-height: 30px;
      text-align: center;
      border-radius: 50%;
      color: #fff;
      background: #04C9BE;
      font-size: 12px;
      display:inline-block;
    }
  }
}

</style>
